import React, { Component } from "react";

import styled from "styled-components";

// BlueBig是一个组件, p表示最终要显示什么标签
// BlueBig仅仅是一个提供样式的组件
const BlueBig = styled.p`
  color: blue;
  /* font-size: 50px; */
  font-size: ${(props) => props.size}px;
`;

class App extends Component {
  render() {
    return (
      <>
        <h2>css-in-js</h2>
        <BlueBig size="100">hello react1!!!</BlueBig>
        <BlueBig size="50">hello react2!!!</BlueBig>
      </>
    );
  }
}

export default App;
